<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>财务分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/profit_analysis' }"
        >设备盈利分析</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="dev-page">
      <div class="box1">
        <div class="title">设备盈利分析</div>
        <!-- 日期 -->
        <div class="flex-a">
          <div class="date-tabs">
            <div
              v-for="item in dateList"
              :key="item.index"
              :class="activeDate === item.index ? 'activity-item' : ''"
              class="tabs-item"
              @click="dateTabs(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="choice-list">
            <div class="choice-item date-item">
              <div class="choice-title">自定义日期</div>
              <el-date-picker
                v-model="detailTime"
                type="date"
                placeholder="请选择日期"
                style="width: 160px"
                :suffix-icon="CaretBottom"
              />
            </div>
            <el-button round color="#0071bb">根据当前财务配置更新</el-button>
            <el-button round color="#0071bb">导出报表</el-button>
          </div>
        </div>
        <div class="data-title">
          盈利设备有 <span>{{ profit }}</span
          >台； 亏损设备有<span>{{ loss }}</span> 台； 收支平衡设备有
          <span>{{ breakEven }}</span
          >台
        </div>
        <!-- 设备搜索列表 -->
        <div class="flex-a">
          <div class="date-tabs">
            <div
              v-for="item in devList"
              :key="item.index"
              :class="activeDev === item.index ? 'activity-item' : ''"
              class="tabs-item"
              @click="devTabs(item)"
            >
              {{ item.name }}
            </div>
          </div>

          <el-tabs v-model="activeDownUp" type="card" class="demo-tabs">
            <el-tab-pane
              :label="v.name"
              :name="v.index"
              v-for="(v, i) of DownUpList"
              :key="i"
            ></el-tab-pane>
          </el-tabs>
          <div class="choice-list">
            <div class="choice-item">
              <div class="choice-title">线路</div>
              <el-select
                v-model="formInline.seachLine"
                placeholder="请选择场景"
              >
                <el-option
                  v-for="i in lineOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">设备名称</div>
              <el-input
                v-model="formInline.deviceName"
                placeholder="请输入设备名称"
              />
            </div>
            <div class="choice-item">
              <div class="choice-title">设备编号</div>
              <el-input
                v-model="formInline.deviceCode"
                placeholder="请输入设备设备编号"
              />
            </div>
            <div class="choice-item flex-sa">
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
              <el-button round :icon="RefreshLeft">重置</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="box">
        <!-- 列表 -->
        <div class="list">
          <div v-for="(v, i) of listData" :key="i">
            <div class="content">
              <div class="content-title">设备名称:{{ v.title }}</div>
              <div class="content-title">线路:{{ v.title }}</div>
              <div class="content-bottom">
                <div class="num">¥{{ v.num }}</div>
                <div class="up">
                  同比上期增长{{ v.up }}%
                  <img class="up-img" src="/src/assets/data-center/下降.png" />
                </div>
                <div class="day">日均: {{ v.perDay }}</div>
                <div class="day">机日均: {{ v.dailyAverage }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="tables">
          <div class="title">设备- 2024 年 05 月盈利分析详情</div>
          <el-table :data="tableData" style="width: 100%" height="98%">
            <el-table-column prop="type" label="类目" />
            <el-table-column prop="money" label="金额" />
            <el-table-column label="备注">
              <template #default="scope">
                <div class="flex-a" v-if="scope.row.remark == 1">
                  <el-tooltip effect="dark" content="按总金额提成比例0%">
                    <img
                      class="tip-img"
                      src="/src/assets/data-center/提示标识.png"
                    /> </el-tooltip
                  >固定租金：￥0.00 销售提成：￥0.00
                </div>
                <el-button
                  round
                  v-if="scope.row.remark == 2"
                  @click="setData(scope)"
                  >设置</el-button
                >
                <div v-else></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="请输入电费(单位：元)"
      width="500"
      :show-close="false"
    >
      <el-input v-model="powerRate" placeholder="请输入电费" />
      <template #footer>
        <div class="bottom-btn">
          <el-button size="small" round color="#0071bb">确定</el-button>
          <el-button size="small" @click="dialogVisible = false" round
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretBottom, Search, RefreshLeft } from "@element-plus/icons-vue";
// 日期组件
const activeDate = ref("5");
const dateList = ref([
  {
    name: "2024年5月",
    index: "5",
  },
  {
    name: "2024年4月",
    index: "4",
  },
  {
    name: "2024年3月",
    index: "3",
  },
  {
    name: "2024年2月",
    index: "2",
  },
  {
    name: "2024年1月",
    index: "1",
  },
]);
const dateTabs = (tabItem: tabsList) => {
  activeDate.value = tabItem.index;
};
// 自定义日期
const detailTime = ref("");
// 黄色数据
const profit = ref(5);
const loss = ref(5);
const breakEven = ref(1);

// 查询条件
const formInline = ref({
  seachLine: "",
  deviceName: "",
  deviceCode: "",
});
const lineOptions = ref([
  {
    label: "线路1",
    value: 1,
  },
  {
    label: "线路2",
    value: 0,
  },
]);
// 设备选择
const activeDev = ref("1");
const devList = ref([
  {
    name: "所有设备",
    index: "1",
  },
  {
    name: "盈利设备",
    index: "2",
  },
  {
    name: "亏损设备",
    index: "3",
  },
  {
    name: "收支平衡设备",
    index: "4",
  },
]);
const devTabs = (tabItem: tabsList) => {
  activeDev.value = tabItem.index;
};
// 降序升序
const activeDownUp = ref("down");
const DownUpList = ref([
  {
    name: "降序",
    index: "down",
  },
  {
    name: "升序",
    index: "up",
  },
]);
// 卡片数据
const listData = ref([
  {
    title: "交易笔数",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "订单总数量（含退款订单）",
  },
  {
    title: "交易额",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "订单实收金额之和（含退款订单）",
  },
  {
    title: "成交额",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "成交额 = 交易额 - 本月退款金额",
  },
  {
    title: "毛利",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "毛利 = 成交额 - 本月支付成功订单成本",
  },
  {
    title: "利润",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: `利润 = 总毛利 - 设备折旧费 
- 设备场地租金
- 电费 - 补货员提成
- 拓点业务员提成 
- 其他业务员提成"`,
  },
]);

// 右侧表格
const tableData = [
  {
    money: "1000",
    type: "华阳",
    remark: 0,
  },
  {
    money: "1000",
    type: "华阳",
    remark: 1,
  },
  {
    money: "1000",
    type: "华阳",
    remark: 2,
  },
  {
    money: "1000",
    type: "华阳",
    remark: 0,
  },
];
// 弹窗数据
const dialogVisible = ref(false);
const powerRate = ref("");
interface tabsList {
  name: string;
  index: string;
}
const setData = (val: any) => {
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.dev-page {
  background-color: #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  height: 88vh;

  .title {
    font-size: 16px;
    color: #000;
    padding: 10px;
  }
  .data-title {
    background: #f0a93e;
    color: #fff;
    font-size: 12px;
    padding: 4px 20px;
    span {
      font-size: 20px;
    }
  }

  .flex-a {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0px 10px 10px 10px;

    .date-tabs {
      text-align: center;
      display: flex;
      font-size: 14px;
      padding: 10px;

      .tabs-item {
        width: 100px;
        padding: 5px;
        background-color: #fff;
        border: 1px solid #d2d2d2;
        border-radius: 20px;
        margin-right: 15px;
      }

      .activity-item {
        background-color: #0071bb;
        border: 1px solid #0071bb;
        color: #fff;
      }

      .tabs-item:hover {
        cursor: pointer;
      }
    }
    .date-item {
      width: 30% !important;
    }
  }

  .choice-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    width: 100%;

    .choice-item {
      width: 25%;
      display: flex;
      align-items: center;
      // margin-bottom: 10px;

      .choice-title {
        font-size: 12px;
        width: 80px;
        text-align: center;
      }

      .rounded-input {
        width: 250px;
      }
    }
  }
  .box1 {
    height: 28% !important;
  }
  .box {
    flex: 1;
    display: flex;
    align-items: start;
    justify-content: space-between;
    // height: 60vh !important;
    height: 52% !important;
    .list {
      width: 38%;
      height: 100%;
      background: rgb(241, 241, 241);
      overflow-y: scroll;
      > div {
        width: calc(100% - 20px);
        height: 120px;
        margin: 10px;
        border-radius: 15px;
        background: #fff;
        border: 2px solid #cccccc;
        .content {
          padding: 20px;
          .content-title {
            font-size: 10px;
            margin: 4px 0px;
          }
          .content-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .up {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
          .num {
            font-size: 20px;
            color: #000;
            margin: 10px 0px;
          }
          .up {
            font-size: 10px;
            .up-img {
              width: 12px;
              height: 16px;
            }
          }
          .day {
            font-size: 10px;
          }
        }
      }
    }
    .tables {
      background: rgb(241, 241, 241);
      width: 60%;
      text-align: center;
      height: 100% !important;
      .table-btn {
        color: #519ed0;
        cursor: pointer;
      }
    }
  }
}
.from-title {
  font-weight: bold;
  margin: 10px;
  font-size: 18px;
}
.flex-e {
  display: flex;
  align-items: center;
  justify-content: end;
}
.flex-sa {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tip-img {
  width: 20px;
  height: 20px;
}
.demo-tabs {
  padding: 10px 0px;
}
.el-scrollbar {
  background: rgb(241, 241, 241) !important;
}

:deep() {
  .modal {
    th {
      background-color: #fff !important;
      color: #666666 !important;
    }
  }
  .el-tabs__header {
    margin: 0px !important;
  }
  .el-table__inner-wrapper,
  .el-table__body {
    background: rgb(241, 241, 241) !important;
    tr {
      background: rgb(241, 241, 241) !important;
    }
    td {
      border-bottom: 1px solid #ccc !important;
    }
  }

  .el-input {
    width: 100%;
  }
  .el-date {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
</style>
